/// <reference path="index.d.ts" />

import React from "react";
import { View, Text, ScrollView, Image } from "@tarojs/components";





type ReducerProp = (state: ShareChannelView.StateProp, action: Partial<ShareChannelView.StateProp>) => ShareChannelView.StateProp

type StyleProp = {
    containerStyle?: React.CSSProperties;
    contentViewStyle?: React.CSSProperties;
}
type StyleReducerProp = (state: StyleProp, action: Partial<StyleProp>) => StyleProp

const reduer = (state, action) => ({ ...state, ...action })



export default React.forwardRef<ShareChannelView.Current, ShareChannelView.Prop>((props, ref) => {

    const [viewModel, setViewModel] = React.useReducer<ReducerProp>(reduer, {})

    const [styleState, styleDispatch] = React.useReducer<StyleReducerProp>(
        reduer,
        {
            containerStyle: styles.container,
            contentViewStyle: styles.contentViewStyle
        })

    React.useImperativeHandle(ref, () => ({
        show: show,
        hide: () => {
            hide()
        }
    }), [])





    const show = () => {
        styleDispatch({
            containerStyle: {
                ...styleState.containerStyle,
                visibility: 'visible',
                transition: 'visibility 0.35s ease-in'
            },
            contentViewStyle: {
                ...styleState.contentViewStyle,
                transform: `translateY(-${contentViewRef?.current?.clientHeight}px)`,
                transition: 'transform 0.35s ease-in'
            }
        })
    }

    const hide = () => {
        styleDispatch({
            containerStyle: {
                ...styleState.containerStyle,
                visibility: 'hidden',
                transition: 'visibility 0.25s ease-out'
            },
            contentViewStyle: {
                ...styleState.contentViewStyle,
                transform: 'translateY(0px)',
                transition: 'transform 0.25s ease-out'
            }
        })
    }


    //&#10;
    const dataList = [
        { title: '转发到企业微信', icon: require('./icon_1.png') },
        { title: '发送到客户朋友圈', icon: require('./icon_2.png') },
        { title: '用群发助手发送给客户', icon: require('./icon_3.png') },
        { title: '分享微信好友', icon: require('./icon_4.png') },
        { title: '分享到朋友圈', icon: require('./icon_5.png') },
        { title: '发送到我的客户群', icon: require('./icon_6.png') },
    ]
    const contentViewRef = React.useRef<any>()

    return (
        <View
            style={styleState.containerStyle} onClick={e => {
                // hide()
                e.stopPropagation()
            }}
        >

            <View style={styleState.contentViewStyle} ref={contentViewRef} onClick={e => {
                // console.log(e)
                e.stopPropagation()
            }}>

                {/* 头部标题 */}
                <View style={{ display: 'flex', height: '44px', justifyContent: 'center', alignItems: 'center', position: 'relative', borderRadius: '5px 5px 0 0 ' }}>
                    {(() => {
                        // console.log('location',location)
                        return <Text style={{ fontSize: '12px', color: '#808080' }}>网页由{location.hostname}提供</Text>
                    })()}
                </View>

                <ScrollView
                    style={{ width: '100vw', height: '120px' }}
                    scrollX={true}
                    scrollY={false}
                    // onScroll={e => {
                    //     console.log('onScroll', e)
                    // }}

                    // onDragging={e => {
                    //     console.log('onDragging', e)
                    // }}
                >
                    <View style={{ display: 'flex', flexDirection: 'row', height: '100%', flexShrink: 0, }}>
                        {dataList.map((i, idx) =>
                            <View key={`sg-sc-${idx}`} style={{
                                flexShrink: 0,
                                height: '100%',
                                display: 'flex', flexDirection: 'column', alignItems: 'center',
                                // marginLeft: "15px",
                                // marginRight: idx == dataList.length - 1 ? '15px' : 0,
                                // backgroundColor:idx%2 == 0 ?'red':'cyan'
                                // position: 'relative'
                            }}
                                onClick={e => {
                                    e.stopPropagation()
                                    hide()
                                    props.onOk && props.onOk({ index: idx, title: i.title })
                                }}
                            >
                                <Image src={i.icon} style={{ width: '52px', height: '52px', marginTop: '20%' }} mode='aspectFill' />
                                <Text style={{
                                    // position: 'absolute', bottom: '5%',
                                    marginTop: '5px',
                                    width: '70px', fontSize: '12px', color: '#808080', textAlign: 'center', transform: 'scale(0.8)'
                                }} className='oneLine line2'>{i.title}</Text>
                            </View>
                        )}
                    </View>

                </ScrollView>



                <View style={{ height: '60px', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: 'white' }}
                    onClick={e => {
                        e.stopPropagation()
                        hide()
                    }}
                >
                    <Text style={{ fontSize: '16px', color: '#000000' }}>取消</Text>
                </View>

            </View>
        </View>

    )
})



const styles: Record<string, React.CSSProperties> = {
    container: {
        position: 'fixed',
        zIndex: 99999,
        width: '100vw',
        height: '100vh',
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: '#00000055',
        visibility: 'hidden',
        // visibility: 'visible',
        overflow: 'hidden'
    },
    contentViewStyle: {
        position: 'absolute',
        top: '100%',
        width: '100%',
        backgroundColor: '#F0F0F0'
    }
}



